<template>
	<view class="play_list">
		<view class="top_nav_wrap">
			<NavScroll @changeIndex="toggleSort" :sortList="sortList" :curSortIndex="curSortIndex" />
			<view class="add_sort">
				<text class="iconfont icon-jia"></text>
			</view>
		</view>
		<view class="bottom_tag_list">
			<swiper circular @animationfinish="changeSongList" :current="curSortIndex">
				<swiper-item class="swiper-item" v-for="index in sortList.length" :key="index">
					<scroll-view @scrolltolower="scrolltolower" scroll-y v-show="isShow">
						<view class="swiper-scroll-content">
							<view class="swiper-scroll-item" @click="toPlayList(item.id)" v-for="item in tagSortPlayList" :key="item.id">
								<image :src="item.coverImgUrl" mode="widthFix"></image>
								<view>{{item.name}}</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<bottom-bar ref="btmBarRef"/>
	</view>
</template>

<script>
	import NavScroll from '../../components/NavScroll/NavScroll.vue'
	import {
		getHotPlaylist,
		getTopPlaylist
	} from '../../api/index.js'
	import BottomBar from '../index/childComps/BottomBar.vue'
	export default {
		data() {
			return {
				// 热门歌单分类
				sortList: [],
				// 当前tag的索引值
				curSortIndex: 0,
				// 当前tag
				tagName: '',
				// 当前tag的歌单列表
				tagSortPlayList: [],
				// 是否显示当前tag的歌单列表
				isShow: false,
				total: 0
			}
		},
		components: { NavScroll },
		components:{BottomBar},
		onLoad() {
			this.getHotPlaylistFun()
		},
		watch: {
			// 监听
			curSortIndex: {
				handler(newIndex) {
					this.isShow = false
					this.tagSortPlayList = []
					this.tagName = this.sortList[newIndex].name
					this.getTopPlaylistFun(this.tagName)
				}
			} 
		},
		methods: {
			async getHotPlaylistFun() {
				const {
					data: {
						tags
					}
				} = await getHotPlaylist()
				this.sortList = tags
				this.tagName = tags[0].name
				this.getTopPlaylistFun(this.tagName)
			},
			async getTopPlaylistFun(cat, offset = '') {
				const {data: res} = await getTopPlaylist({cat, limit: 21, offset})
				// console.log(res, this.tagSortPlayList)
				const arr = [...this.tagSortPlayList, ...res.playlists]
				// 去除重复
                for (let i = 0, len = arr.length; i < len; i++) {
                    for (let j = i + 1, len = arr.length; j < len; j++) {
                        if (arr[i]?.id === arr[j]?.id) { // 可选链?. es6新出语法
                            arr.splice(j, 1);
                            j--;        // 每删除一个数j的值就减1
                        }
                    }
				}
				this.tagSortPlayList = arr
				// console.log(this.tagSortPlayList)
				this.total = res.total
				this.isShow = true
			},
			//点击某个歌单分类时触发
			toggleSort(index) {
				this.curSortIndex = index
			},
			// 用户滑动歌单列表动画结束时触发
			changeSongList(e) {
				const { current } = e.detail
				// 更新歌单所在索引
				this.curSortIndex = current
			},
			// 用户滚动到scroll-view底部触发
			scrolltolower() {
				this.getTopPlaylistFun(this.tagName, this.tagSortPlayList.length)
			},
			// 点击跳转到PlayList页面
			toPlayList(playListId) {
				uni.navigateTo({
					url: '/pages/playlist/playlist?playListId=' + playListId
				})
			}
		},
		onShow() {
			// 等待DOM加载完毕后在执行，子组件 BottomBar的初始化数据函数
			this.$nextTick(function(){
				this.$refs.btmBarRef.initData()
			})
		}
	}
</script>

<style lang="scss">
	.play_list {

		.top_nav_wrap {
			display: flex;
			padding: 0 20rpx;
			align-items: center;
			.add_sort {
				flex: 1;
				text-align: center;
				transform: translate(8rpx);
			}
		}
		.bottom_tag_list {
			/* #ifndef H5 */
			height: calc(100vh - 180rpx);
			/* #endif */
			/* #ifdef H5 */
			height: calc(100vh - 270rpx);
			/* #endif */
			width: 100%;
			margin-top: 10rpx;
			swiper {
				width: 100%;
				height: 100%;
				scroll-view {
					width: 100%;
					height: 100%;
					.swiper-scroll-content {
						display: flex;
						flex-wrap: wrap;
						.swiper-scroll-item {
							width: 33.33%;
							padding: 20rpx;
							padding-bottom: 0;
							image {
								width: 100%;
                min-width: 100%;
                height: 210rpx;
								border-radius: 20rpx;
								vertical-align: middle;
								margin-bottom: 10rpx;
                /* #ifdef APP-PLUS */
                background: url('@/static/images/song/default.png') no-repeat center center;
                background-size: cover;
                /* #endif */
							}
							view {
								// 超过2行省略号
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								-ms-text-overflow: ellipsis;
								text-overflow: ellipsis;
								font-size: 26rpx;
								color: #949494;
							}
						}
					}
				}
			}
		}
	}
</style>
